<template>
	<view>
		<view class="page-container">
			<!-- 底层图片：对应图三的“组5@2x.png” -->
			<image src="/pages/Car/static/图层1@2x.png" class="bg-image" mode="widthFix" />
		
			<!-- 上层内容：领券中心标题栏 + 优惠券列表 -->
			<view class="top-content">
				<view class="navigator">领券中心</view>
				<view class="carView">
				<!-- 优惠券列表 -->
				<view class="coupon-list">
					<!-- 优惠券卡片1：可领取 -->
					<view class="coupon-card">
					    <!-- 图片作为背景层 -->
					    <image class="coupon-bg" src="/pages/priceP/static/组5@2x.png" mode="aspectFill"></image>
					    <!-- 文字内容层 -->
					    <view class="coupon-content">
					        <view class="coupon-amount">¥20</view>
					        <view class="coupon-info">
					            <view class="coupon-condition">满200元可用</view>
					            <view class="coupon-scope">仅限于XX加油站使用</view>
					            <view class="coupon-time">2020.04.11—2023.05.11</view>
					            <button class="coupon-btn">领取</button>
					        </view>
					    </view>
					</view>

					<!-- 优惠券卡片2：已领取 -->
					<view class="coupon-card">
					    <!-- 图片作为背景层 -->
					    <image class="coupon-bg" src="/pages/priceP/static/组5@2x.png" mode="aspectFill"></image>
					    <!-- 文字内容层 -->
					    <view class="coupon-content">
					        <view class="coupon-amount">¥20</view>
					        <view class="coupon-info">
					            <view class="coupon-condition">满200元可用</view>
					            <view class="coupon-scope">仅限于XX加油站使用</view>
					            <view class="coupon-time">2020.04.11—2023.05.11</view>
					            <button class="coupon-btn">领取</button>
					        </view>
					    </view>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 无逻辑代码，保持空即可
</script>

<style>
	/* 父容器：约束子元素定位范围 */
	.page-container {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	/* 底层图片：层级最低，作为背景 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}

	/* 上层内容：层级高于背景图，承载文字和按钮 */
	.top-content {
		position: relative;
		z-index: 2;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.navigator {
		display: flex;
		justify-content: center;
		color: white;
	}
	
	.carView {
		height: 100%;
		background-color: #fff;
		margin: 50rpx 15rpx;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
	}

	/* 优惠券卡片通用样式 */
	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}
	.coupon-card {
	    position: relative; /* 1. 建立定位上下文 */
	    width: 100%;
	    height: 200rpx; /* 设置一个明确的高度 */
	    border-radius: 12rpx;
	    overflow: hidden; /* 防止内容溢出圆角 */
	}
	
	.coupon-bg {
	    position: absolute; /* 2. 图片作为背景 */
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 1; /* 图片在底层 */
	}
	
	.coupon-content {
	    position: relative; /* 3. 文字层相对定位 */
	    z-index: 2; /* 确保文字在图片上方 */
	    display: flex;
	    align-items: center;
	    height: 100%;
	    padding: 0 40rpx;
	}
	
	.coupon-amount {
	    color: #fff;
	    font-size: 48rpx;
	    font-weight: bold;
	    margin-right: 30rpx;
	}
	.coupon-info {
		flex: 1;
		padding: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.coupon-condition {
		font-size: 30rpx;
		color: #ff7d4e;
		font-weight: bold;
	}
	.coupon-scope, .coupon-time {
		font-size: 24rpx;
		color: #999;
	}
	.coupon-btn {
		align-self: flex-end;
		background-color: #ff7d4e;
		color: #fff;
		border-radius: 30rpx;
		margin-top: 15rpx;
		padding: 0 24rpx;
		font-size: 24rpx;
		height: 40rpx; /* 添加固定高度，确保按钮高度降低 */
		line-height: 40rpx; /* 行高与高度相同，确保文字垂直居中 */
	}
	.coupon-btn.disabled {
		background-color: #ccc; /* 已领取按钮置灰 */
		color: #fff;
	}
</style>